<template>
  <div class="oe-approval-list">
    <top-tip v-if="batchTitle" :batchTitle="batchTitle" :examTitle="examTitle" :goManage="true" :batchid="batchid"></top-tip>
    <div class="oe-approval-container">
      <div class="oe-approval-input">
        姓名/学号：
        <a-input v-model="student" placeholder="请输入学生姓名或学号" />班级：
        <a-input v-model="className" placeholder="请输入班级名称" />
        是否为补考：
        <a-select defaultValue="全部" style="width: 200px" @change="handleChange">
          <a-select-option value="全部">全部</a-select-option>
          <a-select-option value="是">是</a-select-option>
          <a-select-option value="否">否</a-select-option>
        </a-select>
        <a-button type="primary" @click.stop="getExamInfo">查询</a-button>
        <a-button type="primary">
          <a :href="exportUrl">导出列表</a>
        </a-button>
        <a-button type="primary" v-if="isMarked" @click.stop="returnStu()">批量重批</a-button>
      </div>
      <div class="oe-approval-table">
        <a-table
          :rowSelection="(state == 1 || state == 2)?{ selectedRowKeys: selectedStudent, onChange: onSelectStudent }:null"
          @change="onTableChange"
          :columns="columns"
          :dataSource="dataList"
          :pagination="pagination"
        >
          <span slot="operation" slot-scope="text, record" v-if="state == 1 || state == 2">
            <a-tooltip placement="bottom" v-if="record.SynchronizedAnswers == 0">
              <template slot="title">
                <span>该试卷还未同步答案，请先同步答案</span>
              </template>
              <span
                class="iconfont icon-chakan"
                style="color:#ccc;cursor: pointer;"
                @click.stop="clickAction(record)"
              ></span>
            </a-tooltip>
            <a-tooltip placement="bottom" v-else>
              <template slot="title">
                <span>查看详情</span>
              </template>
              <span
                class="iconfont icon-chakan"
                style="color:#1890ff;cursor: pointer;"
                @click.stop="clickAction(record)"
              ></span>
            </a-tooltip>
          </span>
        </a-table>
      </div>
    </div>
  </div>
</template>

<script>
import topTip from '@/components/top-tip/index.vue';
import GetOperationList from '@/lib/mixin/methods.js';
export default {
  name: 'approvalList',
  mixins: [GetOperationList],
  components: {
    topTip
  },
  data() {
    return {
      titleList: [{ text: '' }],
      isMarked: false,
      selectedRowKeys: [],
      selectedStudent: [],
      // 搜索的学生
      student: '',
      className: '',
      // 考试id
      examId: '',
      // 某id试卷集合状态
      state: -1,
      // 是否补考
      IsRepair: '',
      // 分页配置
      pagination: {
        pageSizeOptions: ['10', '20', '50', '100', '1000'],
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal(total) {
          return `共 ${total} 条`;
        },
        onShowSizeChange: (current, pageSize) => {
          this.pagination.current = current;
          this.pagination.pageSize = pageSize;
          // this.getExamInfo('', current, pageSize);
        },
        onChange: (current, pageSize) => {
          this.pagination.current = current;
          this.pagination.pageSize = pageSize;
          // this.getExamInfo('', current, pageSize);
        },
        buildOptionText(props) {
          return props.value + '条/页';
        },
        current: 1,
        pageSize: 10,
        total: 0
      },
      // 表标题
      columns: [
        {
          title: '序号',
          dataIndex: 'Number',
          width: '9%',
          key: 'Number'
        },
        {
          title: '姓名',
          dataIndex: 'DisplayName',
          width: '8%',
          key: 'DisplayName',
          sorter: true
        },
        {
          title: '学号',
          dataIndex: 'UserNo',
          width: '10%',
          key: 'UserNo',
          sorter: true
        },
        {
          title: '是否补考',
          dataIndex: 'IsRepair',
          width: '10%',
          key: 'IsRepair',
          sorter: true
        },
        {
          title: '院系',
          dataIndex: 'SubName',
          width: '8%',
          key: 'SubName',
          sorter: true
        },
        {
          title: '专业',
          dataIndex: 'MajorName',
          width: '8%',
          key: 'MajorName',
          sorter: true
        },
        {
          title: '年级',
          dataIndex: 'GradeName',
          width: '8%',
          key: 'GradeName',
          sorter: true
        },
        {
          title: '班级',
          dataIndex: 'ClassName',
          width: '8%',
          key: 'ClassName',
          sorter: true
        },
        {
          title: '成绩',
          dataIndex: 'GetScore',
          width: '8%',
          key: 'GetScore',
          sorter: true,
          customRender: this.notApprovaledScore
        },
        {
          title: '提交时间',
          dataIndex: 'SubmitCreated',
          width: '10%',
          key: 'SubmitCreated',
          sorter: true
        }
      ],
      idstudents: [],
      // 数据列表
      dataList: [],
      exportUrl: '',
      examTitle:'',
      batchTitle:'',
    };
  },
  props: {
    batchid: {
      type: String,
      default: ''
    }
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      if (vm.$route.name == 'approvaledList') {
        vm.titleList = [{ text: '已批阅' }];
        vm.isMarked = true;
        // vm.columns.splice(8, 0, {
        //   title: '补考成绩',
        //   dataIndex: 'retestScore',
        //   width: '8%',
        //   key: 'retestScore',
        //   sorter: true
        // });
        vm.columns.push({
          title: '操作',
          dataIndex: 'operation',
          width: '6%',
          key: 'operation',
          scopedSlots: { customRender: 'operation' }
        });

        vm.examId = vm.$route.params.examid;
        // vm.examId = 'loiat6rk6xjfdulrwp2g';
        vm.state = 2;
        vm.getExamInfo('', vm.pagination.current, vm.pagination.pageSize);
      } else if (vm.$route.name == 'notApprovaledList') {
        vm.titleList = [{ text: '未批阅' }];
        // vm.columns.splice(8, 0, {
        //   title: '补考成绩',
        //   dataIndex: 'retestScore',
        //   width: '8%',
        //   key: 'retestScore',
        //   sorter: true
        // });
        vm.columns.push({
          title: '操作',
          dataIndex: 'operation',
          width: '6%',
          key: 'operation',
          scopedSlots: { customRender: 'operation' }
        });
        vm.examId = vm.$route.params.examid;
        // vm.examId = 'hwemat2rtkvntkz8vo6wfa';
        vm.state = 1;
        vm.getExamInfo('', vm.pagination.current, vm.pagination.pageSize);
      } else if (vm.$route.name == 'unsubmittedList') {
        vm.titleList = [{ text: '未交' }];
        vm.columns = vm.columns.slice(0, 8);

        vm.examId = vm.$route.params.examid;
        // vm.examId = 'awu4aj6r74bjmefen0hopa';
        vm.state = 0;
        vm.getExamInfo('', vm.pagination.current, vm.pagination.pageSize);
      }
      vm.getOpeartion()
    });
  },
  methods: {
    getOpeartion() {
      this.loading = true;
      this.GetOperationList('examId',this.$route.params.examid).then((rst) => {
        this.loading = false;
        if (rst.code === 1) {
          this.examTitle = rst.examTitle
          this.batchTitle = rst.batchTitle
        } else {
          this.$message.error(rst.msg);
        }
      });
    },
    handleChange(val) {
      if (val === '是') {
        this.IsRepair = '1';
      } else if (val === '否') {
        this.IsRepair = '0';
      } else {
        this.IsRepair = '';
      }
    },
    onTableChange(pagination, filter, sort) {
      let sortOrder = '';
      if (sort.order) {
        if (sort.order == 'ascend') {
          sortOrder = sort.columnKey;
        } else if (sort.order == 'descend') {
          sortOrder = '-' + sort.columnKey;
        } else {
          sortOrder = '';
        }
      }
      this.getExamInfo(sortOrder, pagination.current, pagination.pageSize);
    },
    notApprovaledScore(value, row, index) {
      if (this.titleList[0].text === '未批阅') {
        return '--';
      } else {
        return value;
      }
    },
    onSelectStudent(selectedRowKeys, selectedRows) {
      this.selectedStudent = selectedRowKeys;
      var ids = [];
      for (let i = 0; i < selectedRows.length; i++) {
        ids.push(selectedRows[i].Id);
      }
      this.idstudents = ids;
    },
    returnStu() {
      if (this.idstudents.length == 0) {
        this.$message.error('请选择要退回的学生');
        return;
      }
      this.loading = true;
      this.$http
        .post('/api/design/marking/backAllExam', {
          examId: this.$route.params.examid,
          batchStuIds: this.idstudents
        })
        .then((rst) => {
          this.loading = false;
          if (rst.code === 1) {
            this.idstudents = [];
            this.selectedStudent = [];
            this.getExamInfo();
            this.$message.success(rst.msg);
          } else {
            this.$message.error(rst.msg);
          }
        });
    },
    getExamInfo(sortOrder, page, pageSize) {
      this.exportUrl = '/api/design/student/getList?export=2&state=' + this.state + '&examId=' + this.examId + "&key="+this.student + "&className="+this.className + "&sort="+(sortOrder || '');
      this.$http
        .post('/api/design/student/getList', {
          examId: this.examId,
          key: this.student || '',
          className:this.className,
          state: this.state,
          sort: sortOrder || '',
          isRepair: this.IsRepair || '',
          page: page || 1,
          pageSize: pageSize || 10
        })
        .then((result) => {
          this.loading = false;
          this.dataList = [];
          if (result.code == 1) {
            this.pagination.current = result.pagination.pageIndex;
            this.pagination.pageSize = result.pagination.pageSize;
            this.pagination.total = result.pagination.totalCount;
            if (result.list.length > 0) {
              result.list.forEach((item, index) => {
                let number = (result.pagination.pageIndex - 1) * result.pagination.pageSize + index + 1;
                this.dataList.push({
                  ...item,
                  Number: number,
                  IsRepair: item.IsRepair ? '是' : '否'
                });
              });
            } else {
              this.dataList = [];
            }
          } else {
            this.$message.error(result.msg);
          }
        });
    },
    // 查看学生考试详情详情
    clickAction(data) {
      let name = this.$route.name === 'approvaledList'?'studentExamDetail2':'studentExamDetail3'
      let newPage = this.$router.resolve({
        name,
        params: {
          batchid: this.batchid,
          examid: this.$route.params.examid,
          stuid: data.StuId,
          type: this.state
        }
      });
      window.open(newPage.href, '_blank');
    }
  }
};
</script>
